<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function changeAttribute() {
            var in1 = document.getElementById("in1");
            // 获得属性值
            console.log(in1.type);
            console.log(in1.value);
            // 修改属性值
            in1.type = "button";
            in1.value = "哈喽哇"
        }

        function changeStyle() {
            var in1 = document.getElementById("in1");
            // 注意：原始样式名中，如果有 - 符号，则要更换为驼峰式~
            in1.style.color = "yellow";
            in1.style.borderRadius = "5px";
        }

        function changeText() {
            var div01 = document.getElementById("div01");
            // innerText 修改后 无法显示对应的 HTML 标签 只以 文本形式输出
            div01.innerText = "<h1>嗨</h1>";
            console.log(div01.innerText)

            // innerHTML 修改后 可以显示对应的 HTML 标签 以h1的标题形式显示了
            div01.innerHTML = "<h1>嗨</h1>";
            console.log(div01.innerText);
            
        }
    </script>

    <style>
        #in1{
            color:red;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <input id = "in1" type = "text" value = "hello">
    <hr>
    <div id = "div01">
        hello
    </div>
    <button onclick = "changeAttribute()">操作属性</button>
    <button onclick = "changeStyle()">操作样式</button>
    <button onclick = "changeText()">操作内容</button>
</body>
</html>